<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            DEFAULT: '#4361ee',
                            light: '#738bff',
                            dark: '#2b4acb'
                        },
                        secondary: {
                            DEFAULT: '#7209b7',
                            light: '#9d4eda',
                            dark: '#5a0591'
                        }
                    }
                }
            }
        }
    </script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- AOS 动画库 -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/photo-edit.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <header class="navbar bg-gradient-to-r from-primary-dark to-primary text-white sticky top-0 z-50 shadow-lg">
        <div class="logo font-bold text-xl flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            照片管理系统
        </div>
        <nav class="nav-menu">
            <button class="nav-item active hover:bg-primary-light transition-all duration-300" data-tab="upload">照片上传</button>
            <button class="nav-item hover:bg-primary-light transition-all duration-300" data-tab="templates">照片模板</button>
            <button class="nav-item hover:bg-primary-light transition-all duration-300" data-tab="faceSwap">AI换脸</button>
            <button class="nav-item hover:bg-primary-light transition-all duration-300" data-tab="help">帮助中心</button>
        </nav>
        <div class="nav-user">
            <div id="userLoggedIn" class="hidden">
                <span id="userInfo" class="text-white opacity-80 ">未登录</span>
                <button id="userMenuBtn" class="hover:bg-primary-light p-2 rounded-full transition-all duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
                    </svg>
                </button>
            </div>
            <div id="userNotLoggedIn">
                <a href="login.html" class="text-white hover:text-gray-200">登录</a>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 照片上传区块 -->
        <section id="upload" class="feature-section active" data-aos="fade-up" data-aos-duration="800">
            <h2 class="text-2xl font-bold mb-6" data-aos="fade-right" data-aos-delay="200">照片上传与处理</h2>
            <div class="upload-area">
                <div id="bgUploadBox" class="upload-box" data-aos="zoom-in" data-aos-delay="300">
                    <input type="file" id="photoInput" accept="image/*">
                    <p>点击或拖拽照片至此处上传</p>
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                </div>
                <div class="preview-box hidden" data-aos="fade-up" data-aos-delay="400">
                    <img id="previewImage" src="" alt="预览图">
                    <div class="controls-panel">
                        <!-- 控制面板内容 -->
                        <div class="action-buttons">
                            <button id="resetBtn" class="btn-secondary">重置</button>
                            <button id="downloadBtn" class="btn-primary">下载</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 其他功能区块 -->
        <section id="templates" class="feature-section" data-aos="fade-up" data-aos-duration="800">
            <h2 class="text-2xl font-bold mb-6" data-aos="fade-right" data-aos-delay="200">模板选择</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100">
                    <div class="h-40 bg-gray-200"></div>
                    <div class="p-4">
                        <h3 class="font-semibold text-primary">证件照模板</h3>
                        <p class="text-gray-600 text-sm">标准证件照处理模板</p>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200">
                    <div class="h-40 bg-gray-200"></div>
                    <div class="p-4">
                        <h3 class="font-semibold text-primary">艺术照模板</h3>
                        <p class="text-gray-600 text-sm">美术风格艺术处理</p>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="300">
                    <div class="h-40 bg-gray-200"></div>
                    <div class="p-4">
                        <h3 class="font-semibold text-primary">社交媒体模板</h3>
                        <p class="text-gray-600 text-sm">适合社交平台的图片尺寸</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="faceSwap" class="feature-section" data-aos="fade-up" data-aos-duration="800">
            <h2 class="text-2xl font-bold mb-6" data-aos="fade-right" data-aos-delay="200">AI换脸</h2>
            <div class="bg-white rounded-lg shadow-lg p-6 mb-6" data-aos="zoom-in" data-aos-delay="300">
                <p class="text-gray-700 mb-4">使用先进AI技术进行面部换脸处理。</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="border border-gray-200 rounded-lg p-4" data-aos="flip-left" data-aos-delay="400">
                        <h3 class="font-semibold text-primary mb-2">上传源图片</h3>
                        <div class="h-32 bg-gray-100 rounded flex justify-center items-center">
                            <span class="text-gray-500">点击上传图片</span>
                        </div>
                    </div>
                    <div class="border border-gray-200 rounded-lg p-4" data-aos="flip-right" data-aos-delay="500">
                        <h3 class="font-semibold text-secondary mb-2">上传目标图片</h3>
                        <div class="h-32 bg-gray-100 rounded flex justify-center items-center">
                            <span class="text-gray-500">点击上传图片</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="profile" class="feature-section" data-aos="fade-up" data-aos-duration="800">
            <h2 class="text-2xl font-bold mb-6" data-aos="fade-right" data-aos-delay="200">个人资料</h2>
            <div class="bg-white rounded-lg shadow-lg p-6" data-aos="zoom-in" data-aos-delay="300">
                <div class="flex items-center gap-4 mb-6" data-aos="fade-right" data-aos-delay="400">
                    <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center text-2xl font-bold">U</div>
                    <div>
                        <h3 class="text-xl font-semibold" id="profileDisplayName">用户名</h3>
                        <p class="text-gray-600" id="profileEmail"></p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div data-aos="fade-up" data-aos-delay="500">
                        <h4 class="text-lg font-semibold mb-3">账户信息</h4>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="mb-2"><span class="text-gray-600">注册日期：</span><span id="registerDate">-</span></p>
                            <p class="mb-2"><span class="text-gray-600">上次登录：</span><span id="lastLogin">-</span></p>
                        </div>
                    </div>
                    <div data-aos="fade-up" data-aos-delay="600">
                        <h4 class="text-lg font-semibold mb-3">使用统计</h4>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="mb-2"><span class="text-gray-600">处理照片数：</span><span id="photoCount">0</span>张</p>
                            <p class="mb-2"><span class="text-gray-600">使用模板数：</span><span id="templateCount">0</span>个</p>
                        </div>
                    </div>
                </div>

                <!-- 修改密码表单 -->
                <form id="profileForm" class="mt-8 border-t pt-6" data-aos="fade-up" data-aos-delay="700">
                    <h4 class="text-lg font-semibold mb-4">修改密码</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-gray-700 mb-2" for="currentPassword">当前密码</label>
                            <input type="password" id="currentPassword" class="w-full p-2 border border-gray-300 rounded" placeholder="输入当前密码">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                        <div>
                            <label class="block text-gray-700 mb-2" for="newPassword">新密码</label>
                            <input type="password" id="newPassword" class="w-full p-2 border border-gray-300 rounded" placeholder="输入新密码">
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2" for="confirmNewPassword">确认新密码</label>
                            <input type="password" id="confirmNewPassword" class="w-full p-2 border border-gray-300 rounded" placeholder="再次输入新密码">
                        </div>
                    </div>
                    <div class="mt-6">
                        <button type="submit" class="bg-primary text-white py-2 px-4 rounded hover:bg-primary-dark transition-colors">更新密码</button>
                    </div>
                </form>
            </div>
        </section>

        <section id="history" class="feature-section" data-aos="fade-up" data-aos-duration="800">
            <h2 class="text-2xl font-bold mb-6" data-aos="fade-right" data-aos-delay="200">历史记录</h2>
            <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="zoom-in" data-aos-delay="300">
                <div class="p-4 bg-gray-50 border-b">
                    <h3 class="font-semibold">最近处理的照片</h3>
                </div>
                <div id="historyContent" class="p-0">
                    <!-- 历史记录内容将由JavaScript动态加载 -->
                    <div id="emptyHistoryMessage" class="p-8 text-center text-gray-500">暂无历史记录</div>
                </div>
            </div>
        </section>

        <section id="help" class="feature-section" data-aos="fade-up" data-aos-duration="800">
            <h2 class="text-2xl font-bold mb-6" data-aos="fade-right" data-aos-delay="200">帮助中心</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white rounded-lg shadow-md p-6" data-aos="zoom-in" data-aos-delay="300">
                    <h3 class="text-xl font-semibold mb-4 text-primary">常见问题</h3>
                    <div class="space-y-4">
                        <div data-aos="fade-up" data-aos-delay="400">
                            <h4 class="font-medium">如何上传照片？</h4>
                            <p class="text-gray-600">点击上传区域或拖拽照片到指定区域即可上传。</p>
                        </div>
                        <div data-aos="fade-up" data-aos-delay="500">
                            <h4 class="font-medium">支持哪些图片格式？</h4>
                            <p class="text-gray-600">支持JPG、PNG、GIF等常见图片格式。</p>
                        </div>
                        <div data-aos="fade-up" data-aos-delay="600">
                            <h4 class="font-medium">如何使用AI换脸功能？</h4>
                            <p class="text-gray-600">上传源图片和目标图片，系统将自动进行面部替换。</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6" data-aos="zoom-in" data-aos-delay="400">
                    <h3 class="text-xl font-semibold mb-4 text-secondary">联系我们</h3>
                    <form class="space-y-4">
                        <div data-aos="fade-up" data-aos-delay="500">
                            <label class="block text-gray-700 mb-2">您的邮箱</label>
                            <input type="email" class="w-full p-2 border border-gray-300 rounded" placeholder="请输入您的邮箱">
                        </div>
                        <div data-aos="fade-up" data-aos-delay="600">
                            <label class="block text-gray-700 mb-2">问题描述</label>
                            <textarea class="w-full p-2 border border-gray-300 rounded h-32" placeholder="请描述您遇到的问题"></textarea>
                        </div>
                        <div data-aos="fade-up" data-aos-delay="700">
                            <button type="submit" class="bg-secondary text-white py-2 px-4 rounded hover:bg-secondary-dark transition-colors">提交问题</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <!-- 侧边栏 -->
    <div id="userSidebar" class="sidebar">
        <div class="sidebar-header">
            <h3>用户菜单</h3>
            <button id="closeSidebar">&times;</button>
        </div>
        <div class="sidebar-content">
            <div class="user-info">
                <div class="avatar bg-primary text-white">U</div>
                <div>
                    <h4 id="sidebarUsername">用户名</h4>
                    <p>个人账户</p>
                </div>
            </div>
            <div class="sidebar-menu">
                <a href="#" class="sidebar-item" data-action="profile">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-primary"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                    个人资料
                </a>
                <a href="#" class="sidebar-item" data-action="history">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-primary"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
                    历史记录
                </a>
                <a href="#" class="sidebar-item" data-action="help">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-primary"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
                    帮助中心
                </a>
                <!-- 登录按钮 (未登录时显示) -->
                <a href="#" class="sidebar-item" data-action="login">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-primary"><path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/></svg>
                    登录
                </a>
                <!-- 退出登录按钮 (登录后显示) -->
                <a href="#" class="sidebar-item" data-action="logout">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-danger"><path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/></svg>
                    退出登录
                </a>
            </div>
        </div>
    </div>
    <div id="sidebarOverlay" class="sidebar-overlay"></div>

    <!-- 加载动画 -->
    <div class="loading-overlay hidden">
        <div class="loading-spinner"></div>
        <p>处理中，请稍候...</p>
    </div>

    <!-- 引入脚本 -->
<!--    <script src="js/auth.js"></script>-->
    <script src="js/main.js"></script>
    <script src="js/photo-upload.js"></script>
    <script src="js/face-swap.js"></script>
    <script src="js/profile.js"></script>

    <!-- 初始化AOS动画库 -->
    <script>
        AOS.init({
            duration: 800,        // 动画持续时间
            easing: 'ease-out-cubic',  // 缓动函数
            once: true,           // 动画是否只播放一次
            offset: 50,           // 偏移量 (触发动画的位置)
            delay: 0,             // 默认延迟时间
            anchorPlacement: 'top-bottom', // 定位点位置
            disable: 'mobile'     // 在移动设备上禁用(可选)
        });
    </script>
</body>
</html>